<template>
  <div class="content">
    <div class="buttons">
      <el-button
        class="butt"
        type="primary"
        icon="el-icon-plus"
        v-if="isAuth('mechanismAdd')"
        @click="onnew(0)"
        >开通业务</el-button
      >
    </div>
    <el-table
      :data="list"
      tooltip-effect="dark"
      :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
      stripe
      border
      :row-style="{ height: '0px' }"
      :cell-style="{ padding: '0px' }"
      ref="multipleTable"
    >
      <el-table-column
        min-width="200"
        label="业务品牌"
        prop="channelName"
      ></el-table-column>
      <el-table-column
        min-width="200"
        label="业务类型"
        prop="busName"
      ></el-table-column>
      <el-table-column
        min-width="160"
        label="开通时间"
        prop="createDate"
      ></el-table-column>
      <el-table-column label="状态" min-width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#56BB8A"
            @change="statusChange(scope.row.id)"
            inactive-value="1"
            active-value="0"
            inactive-color="#C0C4CC"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text" @click="details(scope.row)">修改</el-button>
          <el-button type="text" @click="numDelete(scope.row)">配置成本</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="font-size: 16px; margin-top: 30px;margin-left:20px">
      <el-button @click="back" style=" color: rgb(31, 165, 243);"
        >返回</el-button
      >
    </div>
    <!-- <div style="font-size: 16px; margin-top: 30px">
          <el-pagination
            style="text-align: right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="form.page"
            :page-sizes="[20, 50, 100]"
            :page-size="form.number"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div> -->
    <el-dialog
      :close-on-click-modal="false"
      :title="templateTilete"
      width="500px"
      :visible.sync="dialogFormBrandList"
    >
      <el-form :model="forms" ref="forms" label-width="120px">
        <el-row>
          <el-Col>
            <el-form-item
              style="margin-bottom:20px"
              :rules="{
                required: true,
                message: '业务类型不能为空',
                trigger: 'change'
              }"
              label="业务类型"
              prop="busUid"
            >
              <el-select
               @change="memberOffice"
               :disabled="disabled"
                v-model="forms.busUid"
                placeholder="请输入业务类型">
                <el-option v-for="item in bussinessType" :key="item.uid"
                    :label="item.busName"
                    :value="item.uid"></el-option>
              </el-select>
            </el-form-item>
          </el-Col>
          <el-Col>
            <el-form-item
              style="margin-bottom:20px"
              :rules="{
                required: true,
                message: '业务品牌不能为空',
                trigger: 'change'
              }"
              label="业务品牌"
              prop="channelUid"
            >
              <el-select
              :disabled="disabled"
                v-model="forms.channelUid"
                @change="channelChange"
                placeholder="请输入业务品牌">
                <el-option v-for="item1 in vipTypeOptions"
                    :key="item1.uid"
                    :label="item1.channelName"
                    :value="item1.uid"></el-option>
              </el-select>
            </el-form-item>
          </el-Col>
          <el-Col v-for="(itms, i) in forms.channelTypeCfgList" :key="i">
            <el-form-item
              style="margin-bottom:20px"
              label="推广名称"
              :prop="'channelTypeCfgList.' + i + '.typeCode'"
              :rules="{
                required: true,
                message: '推广名称不能为空',
                trigger: 'change'
              }"
            >
              <div style="display: flex">
                <el-select
                  :maxlength="commodityTyepLength"
                  v-model="forms.channelTypeCfgList[i].typeCode"
                  placeholder="请输入推广名称"
                >
                <el-option v-for="item2 in linkName" :key="item2.typeCode" :label="item2.typeName" :value="item2.typeCode"></el-option></el-select>
                <div style="display: flex">
                  <div
                    v-if="i == 0"
                    style="margin-left: 10px;color:#409EFF"
                    type="primary"
                    @click="
                      forms.channelTypeCfgList.push({ typeCode: '' })
                    "
                  >
                    增加类型
                  </div>
                  <div
                    style="margin-left:10px"
                    v-if="i != 0 && i == forms.channelTypeCfgList.length - 1"
                    @click="channelTypeStatus(itms, i)"
                  >
                    <img src="../../assets/images/del.png" />
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-Col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormBrandList = false">取 消</el-button>
        <el-button type="primary"  @click="create('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import https from "../../plugins/https.js";
export default {
  data() {
    return {
      templateTilete:"",
      forms: {
        busUid:"",
        channelUid:"",
        officeUid:this.$route.query.oemUid,
        channelTypeCfgList: [{ typeCode: "" }]
      },
      vipTypeOptions:[],
      bussinessType:[],
      linkName:[],
      dialogFormBrandList: false,
      list: [],
      disabled:false,
      form: {
        officeUid: this.$route.query.oemUid
      }
    };
  },
  created() {
    this.lists();
    this.allBusInfo()
     
  },
  methods: {
    allBusInfo(){
      https.getAllBusInfo({ status: "0" }).then(res => {
        console.log(res);
        this.bussinessType = res.data.data;
      })
      .catch(err => {});
    },
    // 业务类型改变
    memberOffice(val){
      if(!this.type){
        this.forms.channelUid=""
        this.forms.channelTypeCfgList=[{typeCode: ""}]
      }
      
      https.getBusChannel({ busUid: val }).then(res => {
          this.vipTypeOptions = res.data.data;
        })
        .catch(err => {});
    },
    // 业务品牌修改
    channelChange(val){
      https.getBrandChannelType({channelUid:val}).then(res=>{
        this.linkName=res.data.data
      })
    },
    //列表
    lists() {
      https
        .getOfficeBusList(this.form)
        .then(res => {
          if (res.data.code == "0000") {
            this.list = res.data.data;
            this.total = res.data.total;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2 //2秒后自动关闭
            });
          }
        })
        .catch(err => {});
    },
    // 点击完成
    create(){
      this.$refs["forms"].validate(valid => {
        if(valid){
          https.saveOfficeBus(this.forms).then(res=>{
            if(res.data.code=="0000"){
              this.dialogFormBrandList=false
              this.lists()
                     
          }else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2 //2秒后自动关闭
            });
          }
          }).catch(err=>{})
        }
      })
    },
    // 开通
    onnew() {
      if (this.$refs["forms"] !== undefined) {
        this.$refs["forms"].resetFields();
      }
      this.disabled=false
      this.dialogFormBrandList = true;
      this.templateTilete="开通业务"
      this.forms={
        busUid:"",
        addFlag:"1",
        channelUid:"",
        officeUid:this.$route.query.oemUid,
        channelTypeCfgList: [{ typeCode: "" }]
      }     
      // this.$router.push({
      //   name: "finishedProduct",
      //   query: {
      //     oemUid: this.$route.query.oemUid,
      //     title: "机构管理  /  机构列表  /  配置  /  开通业务"
      //   }
      // });
    },
    //修改
    numDelete(val) {
      this.$router.push({
        name: "finishedProduct",
        query: {
          oemUid: this.$route.query.oemUid,
          channelUid: val.channelUid,
          type: "1",
          title: "机构管理  /  机构列表  /  配置  /  配置成本"
        }
      });
    },
    // 删除
     channelTypeStatus(items,val) {
      this.forms.channelTypeCfgList.splice(val, 1);
    },
    // 修改
    details(val) {
      this.disabled=true
      this.type=1
      this.templateTilete="修改业务"
      https.getOfficeBus({
        channelUid:val.channelUid,
        officeUid:this.$route.query.oemUid
      }).then(res=>{
        console.log(res.data)
        this.forms=res.data.data
        this.memberOffice(this.forms.busUid)
        this.channelChange(this.forms.channelUid)
        this.dialogFormBrandList=true
      })
    },
    // 状态改变
    statusChange(val) {
      console.log(val);
      https.changeOfficeBrandStatus({ id: val }).then(res => {
        this.lists();
      });
    },
    //返回
    back() {
      this.$router.push({
        name: "mechanismaa"
      });
    }
  }
};
</script>

<style scoped></style>
